<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="提现"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >

            <div class="card-list">
                <div class="card-item">
                    <img
                        class="bank-card-icon"
                        src="@/assets/images/card/wx-pay-icon.png"
                    />
                    <div class="bank-card-info">
                        <div class="bank-card-name">微信零钱包</div>
                    </div>
                    <common-radio
                        radioName="cardPay"
                        @radioClick="radioClick('wx')"
                        checked="checked"
                    ></common-radio>
                </div>

                <!-- <div
                    class="card-item"
                    v-for="(item,index) of cardList"
                    :key="index"
                >
                    <img
                        class="bank-card-icon"
                        src="@/assets/images/card/bank-card-icon.png"
                    />
                    <div class="bank-card-info">
                        <div class="bank-card-name">{{item.bank_name}} {{item.bank_branch}}</div>
                        <div class="bank-card-num">{{item.bank_card}}</div>
                    </div>
                    <common-radio
                        radioName="cardPay"
                        @radioClick="radioClick('card',item.id)"
                    ></common-radio>
                </div> -->
            </div>

        </common-scroll>
        <!-- 共用页面滚动组件 -->

        <div
            class="sure-btn"
            @click="sureSelect"
        >确定</div>
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
import CommonRadio from '@/components/Radio'
export default {
    name: 'CardSelect',
    components: {
        CommonHeader,
        CommonScroll,
        CommonRadio
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '1.33rem'
            },
            cardList: [],
            payMethods: 'wx',
            selectCardId: ''
        }
    },
    mounted() {
        this.getCardList()
    },
    methods: {
        getCardList() {
            this.axios.post('/api/user/bank/list.json').then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.cardList = data.data.list
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        radioClick(type, id) {
            if (type == 'wx') {
                this.payMethods = type
                this.selectCardId = ''
            } else {
                this.payMethods = type
                this.selectCardId = id
            }
        },
        sureSelect() {
            const that = this
            if (this.payMethods == 'wx') {
                let postData = this.qs.stringify({
                    money: this.$route.query.withdrawMoney,
                    type: this.payMethods
                })
                this.axios
                    .post('/api/user/money/take_out_apply.json', postData)
                    .then(res => {
                        const data = res.data
                        if (data.status == 1) {
                            this.commonDialog.alert(
                                '提示',
                                '申请已提交，请耐心等候！',
                                function() {
                                    that.$router.push('/userCenter/userAccount')
                                }
                            )
                        } else {
                            this.commonDialog.alert('提示', data.msg)
                        }
                    })
            } else {
                let postData = this.qs.stringify({
                    money: this.$route.query.withdrawMoney,
                    bank_id: this.selectCardId,
                    type: this.payMethods
                })
                this.axios
                    .post('/api/user/money/take_out_apply.json', postData)
                    .then(res => {
                        const data = res.data
                        if (data.status == 1) {
                            this.commonDialog.alert(
                                '提示',
                                '申请已提交，请耐心等候！',
                                function() {
                                    that.$router.push('/userCenter/userAccount')
                                }
                            )
                        } else {
                            this.commonDialog.alert('提示', data.msg)
                        }
                    })
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.card-list
    padding-left 0.37rem
    background #fff
    .card-item
        display flex
        align-items center
        height 1.84rem
        padding-right 0.37rem
        border-bottom 1px solid #e5e5e5
        .bank-card-icon
            width 1.09rem
            height 1.09rem
        .bank-card-info
            flex 1
            margin-left 0.4rem
            pointer-events none
            .bank-card-name
                font-size 0.37rem
                color #333
            .bank-card-num
                font-size 0.32rem
                color #999
                margin-top 0.2rem
    .card-item:last-child
        border none
.sure-btn
    position absolute
    bottom 0
    left 0
    right 0
    height 1.33rem
    line-height 1.33rem
    text-align center
    background #d7463c
    font-size 0.37rem
    color #fff
</style>

